import React from 'react'
import { Table, Space, Button, Popconfirm } from 'antd';
import { connect } from 'react-redux'

function MyTable(props) {
  let columns = []
  console.log(props)
  if (!props?.action?.view && !props.btnRightsList.includes('edit') && !props.btnRightsList.includes('delete')) {
    // 没有查看功能，并且没有编辑和删除，则不显示操作列
    columns = [...props.columns]
  } else {
    columns = [...props.columns, {
      title: '操作',
      render: (_, record) => (
        <Space size="middle">
          {
            props?.action?.view && <Button onClick={() => props.action.view.callback(record)}>
              {props.action.view.label || '查看'}
            </Button>
          }
          {
             props?.action?.edit && <Button type='primary' onClick={() => props.action.edit.callback(record)}>
               {props.action.edit.label || '编辑'}
             </Button>
          }
          {
            props.btnRightsList.includes('delete') && props?.action?.delete && <Popconfirm  title={props.action.delete.tip || `确认删除吗？`}
              onConfirm={() => props.action.delete.callback(record._id)}
              okText="确认"
              cancelText="取消">
              <Button type='danger'>
                {props.action.delete.label || '删除'}
              </Button>
            </Popconfirm>
          }
        </Space>
      ),
    }]
  }
  
  return (
    <>
      {
        props.btnRightsList.includes('add') && <div style={{marginBottom: '10px'}}>{props.children}</div>
      }
      <Table {...props} columns={columns} />
    </>
  )
}

export default connect((state) => {
  return {
    btnRightsList: state.userReducer.role.btnRights
  }
})(MyTable)
